<template>
  <div class="recPage">
    <div class="title">RecommendNewMusic</div>
    <searchResultListVue :searchList="state.MusicListDetail"></searchResultListVue>
  </div>
</template>

<script>
import { reqRecommendNewMusic } from '@/api/requests/home'
import { onMounted, reactive } from 'vue';
import searchResultListVue from '@/views/SearchChild/searchResultList.vue';
export default {
  setup() {
    const state = reactive({
      isRecommendShow: false,
      MusicListDetail: []
    })

    onMounted(async () => {
      let result = await reqRecommendNewMusic()
      console.log(result);
      state.MusicListDetail = result.data.result
      // state.MusicListDetail.artists = result.data.result.song.artists
    })

    return { state }
  },
  components: {
    searchResultListVue
  }
}
</script>

<style lang="less" scoped>
.recPage {
  margin-top: 10px;

  .title {
    width: 95%;
    margin: 0 auto;
    padding: 0 10px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 20px;
  }
}
</style>